<template>
  <div class="file_list_wrapper">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="searchForm.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="产品策划名称">
        <el-input
          v-model="searchForm.planName"
          placeholder="策划名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-select v-model="searchForm.type" placeholder="类型" clearable>
          <el-option label="外观方案" value="appearance"></el-option>
          <el-option label="策划方案" value="plan"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传">
        <el-date-picker
          v-model="searchForm.createDate"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleDownloadMany"
          >批量下载</el-button
        >
      </el-form-item>
    </el-form>
    <div class="file_list_table">
      <el-table
        :data="tableData"
        border
        style="width: 100%; height: 650px"
        
        @selection-change="handleFileChange"
      >
        <el-table-column type="selection" width="70px"> </el-table-column>
        <el-table-column prop="name" label="文件名" align="left">
        </el-table-column>
        <el-table-column prop="planName" label="产品名"> </el-table-column>
        <el-table-column prop="type" label="类型"> </el-table-column>
        <el-table-column prop="createTime" label="上传时间">
          <template slot-scope="scope"
            >{{ parseDate(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleDownload(scope.row)">
              下载
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block page">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="8"
        layout="prev, pager, next, total"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { postRequest } from "@/api/api";
import { downloadRequest } from "../../../api/api";
import { SelectData } from "@/mixins/select-data.js";
import JSZip from "jszip";
import FileSaver from "file-saver";
import store from '../../../store';
export default {
  name: "FileList",
  mixins: [SelectData],
  data() {
    return {
      selectFile: [],
      total: -1,
      currentPage: 1,

      tableData: [],
      originForm: {
        name: "",
        type: "",
        planName: "",
        createTime: "",
        create_id: "",
        currentPage: 1,
        pageSize: 8,
      },
      searchForm: {
        name: "",
        type: "",
        planName: "",
        createTime: "",
        create_id: "",
        currentPage: 1,
        pageSize: 8,
      },
    };
  },
  created() {
    let createId = store.getters.loginUser.data.id;
    this.searchForm.create_id = createId;
    this.originForm.create_id = createId;
    postRequest("/workBeach/fileList", this.searchForm).then((res) => {
      this.tableData = res.data.data.records;
      this.total = res.data.data.totalCount;
    });
  },
  activated() {
    this.loadFileByMe(this.searchForm);
  },
  mounted() {},
  methods: {
    handleFileChange(val) {
      this.selectFile = val;
    },

    onSubmit() {
      postRequest("/workBeach/fileList", this.searchForm).then((res) => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.totalCount;
      });
    },
    handleDownload(file) {
      var url = "/plan/download";
      var _this = this;
      let params = { filePath: file.path };
      let fileName = file.name;
      downloadRequest(url, params).then((res) => {
        console.log(res.data);
        let blob = new Blob([res.data]);
        FileSaver.saveAs(blob, fileName);
      });
    },
    down(zip) {
      zip.generateAsync({ type: "blob" }).then((content) => {
        let zipName = "我的文件批量下载.zip";
        FileSaver.saveAs(content, zipName);
      });
    },
    async handleDownloadMany() {
      if (this.selectFile.length == 0) {
        this.$message.error("未选中文件");
        return;
      } else {
        try {
          let zip = new JSZip();
          let url = "/plan/download";
          this.$message.info("请等待一会~正在打包");
          for (let i = 0; i < this.selectFile.length; i++) {
            let fileName = i + 1 + " " + this.selectFile[i].name;
            let params = { filePath: this.selectFile[i].path };
            await downloadRequest(url, params).then((res) => {
              zip.file(fileName, res.data);
            });
          }
          this.down(zip);
        } catch (err) {
          console.log("err", err);
        }
      }
    },
    loadFileByMe(params) {
      postRequest("/workBeach/fileList", params)
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = res.data.data.totalCount;
        })
        .catch((err) => {
          this.$message.err(err);
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleReset() {
      this.searchForm.name = "";
      this.searchForm.planName = "";
      this.searchForm.type = "";
      this.loadFileByMe(this.searchForm);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.searchForm.currentPage = val;
      let params = this.searchForm;
      this.loadFileByMe(params);
    },
  },
};
</script>
<style scoped>
.file_list_wrapper {
}
.list_col {
  margin: 20px 0;
}
.item_pic img {
  width: 100%;
  height: 220px;
}
.file_list_table {
  text-align: center;
}
.page {
  margin-top: 20px;
}
</style>